<template>
  <basic-container class="groupAnalysis">
    <div style="padding: 10px; text-align: right">
      <el-button type="primary" @click="handleDown">预览分析报告</el-button>
      <el-button type="primary" @click="handleDown2"
        >预览分析报告模板</el-button
      >
    </div>
    <div id="groupAnalysisExport" style="width: 100%" v-if="loading">
      <h3 class="textCenter">
        <!-- {{ demographicData.schoolName + demographicData.projectName }}研究报告 -->
        {{ demographicData.schoolName }}
      </h3>

      <h4 class="textCenter">心理健康发展报告</h4>
      <h3 class="textCenter">
        <span
          v-for="(item, count) in demographicData.gradeList"
          :key="count + new Date()"
        >
          <span>{{ item.name }}</span> </span
        >（{{ new Date(demographicData.createAt).getFullYear() }} 学年）
      </h3>
      <div class="preface">
        中小学生正处于身心迅速发展的时期，此时的他们正面临人生重大的变化。学业压力、人际关系、性别认同、职业规划等等，都是这个年纪每一个孩子要面临的人生议题。处理得好不仅仅会让学生情绪稳定、学业进步，而且会对其一生心理健康产生重要影响。反之，如果这个时期的很多心理问题得不到缓解，常常会引发不利的、危机重重的后果。国内有些调查表明，不同程度的心理困扰和适应不良的学生，与他们的学习成绩呈正相关。那么，当前在校学生的心理健康状况如何呢?带着这一问题，我们开展了认真细致的调查研究，以了解当前在校学生的心理健康状况，为本校进一步开展心理健康教育，全面提高学生的心理素质和心理健康水平提供对策性建议，也供教育行政部门和其他人士参考。
      </div>
      <table border="1" class="table_style">
        <tbody>
          <tr>
            <td>教育局负责人</td>
            <td>{{ educationInfo.linkman }}</td>
            <!-- <td>王文清**</td> -->
          </tr>
          <tr>
            <td>督查</td>
            <td>{{ educationInfo.linkmanTwo }}</td>
            <!-- <td>康领导</td> -->
          </tr>
          <tr>
            <td>落实校长</td>
            <td>{{ tenantInfo.linkman }}</td>
            <!-- <td>李文焘</td> -->
            <!-- <td>李**</td> -->
          </tr>
          <tr>
            <td>学校名称</td>
            <td>{{ demographicData.schoolName }}</td>
          </tr>
          <tr>
            <td>数据采集时间</td>
            <td>{{ demographicData.createAt }}</td>
          </tr>
          <tr>
            <td>参加学生人数</td>
            <td>{{ sampleTotal }}</td>
          </tr>
        </tbody>
      </table>
      <div v-if="false">
        <div
          style="
            background: #89e089;
            font-size: 20px;
            margin-top: 10px;
            margin-bottom: 10px;
            padding: 14px;
            color: white;
            text-align: center;
          "
        >
          人口学变量
        </div>
        <div>
          <h3>一、学生基本情况：</h3>
          <span
            v-for="(item, count) in demographicData.gradeList"
            :key="count + Math.random()"
          >
            <span>{{ item.name }}</span>
          </span>
          <span
            >学生参与本次调研共有{{ demographicData.person }}人，
            学生基本情况显示（如表1），</span
          >
          <span
            v-for="(item, count) in demographicData.gradeList"
            :key="count + Math.random()"
          >
            <span>{{ item.name }}</span>
            <span>{{ item.num }}人</span>
          </span>
          <span>。</span>
          <span
            v-for="(item, count) in demographicData.sexList"
            :key="count + Math.random()"
          >
            <span>{{ item.name }}</span>
            <span>{{ item.num }}人，</span>
          </span>
          <span
            v-for="(item, count) in demographicData.onlyChildList"
            :key="count + Math.random()"
          >
            <span>{{ item.name }}</span>
            <span>{{ item.num }}人，</span>
          </span>
          <span
            v-for="(item, count) in demographicData.outLanderList"
            :key="count + Math.random()"
          >
            <span>{{ item.name }}</span>
            <span>{{ item.num }}人，</span>
          </span>
          <span>在曾经患心理疾病方面</span>
          <span
            v-for="(item, count) in demographicData.mentalHealthList"
            :key="count + Math.random()"
          >
            <span>{{ item.name }}</span>
            <span>{{ item.num }}人</span>
            <span
              >占比({{
                parseFloat(
                  ((item.num / demographicData.person) * 100).toFixed(2)
                )
              }}%)，</span
            >
          </span>
          <span
            v-for="(item, count) in demographicData.schoolRecordList"
            :key="count + Math.random()"
          >
            <span>{{ item.name }}</span>
            <span>{{ item.num }}人</span>
            <span
              >占比({{
                parseFloat(
                  ((item.num / demographicData.person) * 100).toFixed(2)
                )
              }}%)，</span
            >
          </span>
          <h3 style="text-align: center">
            表1 {{ demographicData.schoolName }} 学生个人基本情况
          </h3>
          <table border="1" class="table_style" style="text-align: left">
            <tbody>
              <tr>
                <td
                  style="
                    border-left: 1px solid white;
                    border-right: 1px solid white;
                    width: 350px;
                  "
                >
                  变量
                </td>
                <td
                  style="
                    border-left: 1px solid white;
                    border-right: 1px solid white;
                    width: 350px;
                  "
                >
                  人数（N）
                </td>
                <td
                  style="
                    border-left: 1px solid white;
                    border-right: 1px solid white;
                  "
                >
                  百分比（%）
                </td>
              </tr>
              <tr v-if="demographicData.sexList.length">
                <td
                  style="border: 1px solid white; border-top: 1px solid #606266"
                >
                  <h3>性别</h3>
                </td>
                <td
                  style="border: 1px solid white; border-top: 1px solid #606266"
                ></td>
                <td
                  style="border: 1px solid white; border-top: 1px solid #606266"
                ></td>
              </tr>
              <tr
                v-for="(item, count) in demographicData.sexList"
                :key="count + Math.random()"
              >
                <td style="border: 1px solid white">
                  {{ item.name }}
                </td>
                <td style="border: 1px solid white">
                  {{ item.num }}
                </td>
                <td style="border: 1px solid white">
                  {{
                    parseFloat(
                      ((item.num / demographicData.person) * 100).toFixed(2)
                    ) + "%"
                  }}
                </td>
              </tr>
              <tr v-if="demographicData.gradeList.length">
                <td style="border: 1px solid white">
                  <h3>年级</h3>
                </td>
                <td style="border: 1px solid white"></td>
                <td style="border: 1px solid white"></td>
              </tr>

              <tr
                v-for="(item, count) in demographicData.gradeList"
                :key="count + Math.random()"
              >
                <td style="border: 1px solid white">
                  {{ item.name }}
                </td>
                <td style="border: 1px solid white">
                  {{ item.num }}
                </td>
                <td style="border: 1px solid white">
                  {{
                    parseFloat(
                      ((item.num / demographicData.person) * 100).toFixed(2)
                    ) + "%"
                  }}
                </td>
              </tr>

              <tr v-if="demographicData.addressList.length">
                <td style="border: 1px solid white">
                  <h3>出生地</h3>
                </td>
                <td style="border: 1px solid white"></td>
                <td style="border: 1px solid white"></td>
              </tr>
              <tr
                v-for="(item, count) in demographicData.addressList"
                :key="count + Math.random()"
              >
                <td style="border: 1px solid white">
                  {{ item.name }}
                </td>
                <td style="border: 1px solid white">
                  {{ item.num }}
                </td>
                <td style="border: 1px solid white">
                  {{
                    parseFloat(
                      ((item.num / demographicData.person) * 100).toFixed(2)
                    ) + "%"
                  }}
                </td>
              </tr>

              <tr v-if="demographicData.onlyChildList.length">
                <td style="border: 1px solid white">
                  <h3>独生子女</h3>
                </td>
                <td style="border: 1px solid white"></td>
                <td style="border: 1px solid white"></td>
              </tr>
              <tr
                v-for="(item, count) in demographicData.onlyChildList"
                :key="count + Math.random()"
              >
                <td style="border: 1px solid white">
                  {{ item.name }}
                </td>
                <td style="border: 1px solid white">
                  {{ item.num }}
                </td>
                <td style="border: 1px solid white">
                  {{
                    parseFloat(
                      ((item.num / demographicData.person) * 100).toFixed(2)
                    ) + "%"
                  }}
                </td>
              </tr>

              <tr v-if="demographicData.outLanderList.length">
                <td style="border: 1px solid white">
                  <h3>外地转入</h3>
                </td>
                <td style="border: 1px solid white"></td>
                <td style="border: 1px solid white"></td>
              </tr>
              <tr
                v-for="(item, count) in demographicData.outLanderList"
                :key="count + Math.random()"
              >
                <td style="border: 1px solid white">
                  {{ item.name }}
                </td>
                <td style="border: 1px solid white">
                  {{ item.num }}
                </td>
                <td style="border: 1px solid white">
                  {{
                    parseFloat(
                      ((item.num / demographicData.person) * 100).toFixed(2)
                    ) + "%"
                  }}
                </td>
              </tr>

              <tr v-if="demographicData.mentalHealthList.length">
                <td style="border: 1px solid white">
                  <h3>曾经是否有过心理健康问题</h3>
                </td>
                <td style="border: 1px solid white"></td>
                <td style="border: 1px solid white"></td>
              </tr>
              <tr
                v-for="(item, count) in demographicData.mentalHealthList"
                :key="count + Math.random()"
              >
                <td style="border: 1px solid white">
                  {{ item.name }}
                </td>
                <td style="border: 1px solid white">
                  {{ item.num }}
                </td>
                <td style="border: 1px solid white">
                  {{
                    parseFloat(
                      ((item.num / demographicData.person) * 100).toFixed(2)
                    ) + "%"
                  }}
                </td>
              </tr>

              <tr v-if="demographicData.schoolRecordList.length">
                <td style="border: 1px solid white">
                  <h3>学习成绩</h3>
                </td>
                <td style="border: 1px solid white"></td>
                <td style="border: 1px solid white"></td>
              </tr>
              <tr
                v-for="(item, count) in demographicData.schoolRecordList"
                :key="count + Math.random()"
              >
                <td style="border: 1px solid white">
                  {{ item.name }}
                </td>
                <td style="border: 1px solid white">
                  {{ item.num }}
                </td>
                <td style="border: 1px solid white">
                  {{
                    parseFloat(
                      ((item.num / demographicData.person) * 100).toFixed(2)
                    ) + "%"
                  }}
                </td>
              </tr>
            </tbody>
          </table>
          <div></div>

          <hr />
          <h3>二、家庭基本情况：</h3>
          <div>
            <span
              >学生的家庭情况是与学生的状况息息相关的，因此，本文对此进行了调查，
              结果显示（如表2）。</span
            >
            <span
              v-for="(item, count) in demographicData.familyStructList"
              :key="count + Math.random()"
            >
              <span
                >{{
                  parseFloat(
                    ((item.num / demographicData.person) * 100).toFixed(2)
                  )
                }}%的学生的家庭结构是</span
              >
              <span>{{ item.name }}，</span>
            </span>
            <span>在目前大部分时间共同居住家庭的 成员调查中，</span>
            <span
              v-for="(item, count) in demographicData.familyList"
              :key="count + Math.random()"
            >
              <span
                >{{
                  parseFloat(
                    ((item.num / demographicData.person) * 100).toFixed(2)
                  )
                }}%</span
              >
              <span>学生是与{{ item.name }}一起居住的，</span>
            </span>
            <span>在父母文化水平方面，父亲文化水平是</span>
            <span
              v-for="(item, count) in demographicData.fatherEduList"
              :key="count + Math.random()"
            >
              <span>{{ item.name }}</span>
              <span
                >为{{
                  parseFloat(
                    ((item.num / demographicData.person) * 100).toFixed(2)
                  )
                }}%，</span
              >
            </span>
            <span>母亲文化水平是</span>
            <span
              v-for="(item, count) in demographicData.motherEduList"
              :key="count + Math.random()"
            >
              <span>{{ item.name }}</span>
              <span
                >为{{
                  parseFloat(
                    ((item.num / demographicData.person) * 100).toFixed(2)
                  )
                }}%，</span
              >
            </span>

            <span>在家庭人均月收入中，</span>
            <span
              v-for="(item, count) in demographicData.monthAmountList"
              :key="count + Math.random()"
            >
              <span>{{ item.num }}个家庭的人均月收入为</span>
              <span>{{ item.name }},</span>
            </span>
          </div>

          <h3 style="text-align: center">
            表2 {{ demographicData.schoolName }} 学生家庭基本情况
          </h3>
          <table border="1" class="table_style" style="text-align: left">
            <tbody>
              <tr>
                <td
                  style="
                    border-left: 1px solid white;
                    border-right: 1px solid white;
                    width: 350px;
                  "
                >
                  变量
                </td>
                <td
                  style="
                    border-left: 1px solid white;
                    border-right: 1px solid white;
                    width: 350px;
                  "
                >
                  人数（N）
                </td>
                <td
                  style="
                    border-left: 1px solid white;
                    border-right: 1px solid white;
                  "
                >
                  百分比（%）
                </td>
              </tr>
              <tr v-if="demographicData.fatherEduList.length">
                <td
                  style="border: 1px solid white; border-top: 1px solid #606266"
                >
                  <h3>父亲文化程度</h3>
                </td>
                <td
                  style="border: 1px solid white; border-top: 1px solid #606266"
                ></td>
                <td
                  style="border: 1px solid white; border-top: 1px solid #606266"
                ></td>
              </tr>
              <tr
                v-for="(item, count) in demographicData.fatherEduList"
                :key="count + Math.random()"
              >
                <td style="border: 1px solid white">
                  {{ item.name }}
                </td>
                <td style="border: 1px solid white">
                  {{ item.num }}
                </td>
                <td style="border: 1px solid white">
                  {{
                    parseFloat(
                      ((item.num / demographicData.person) * 100).toFixed(2)
                    ) + "%"
                  }}
                </td>
              </tr>

              <tr v-if="demographicData.motherEduList.length">
                <td style="border: 1px solid white">
                  <h3>母亲文化程度</h3>
                </td>
                <td style="border: 1px solid white"></td>
                <td style="border: 1px solid white"></td>
              </tr>

              <tr
                v-for="(item, count) in demographicData.motherEduList"
                :key="count + Math.random()"
              >
                <td style="border: 1px solid white">
                  {{ item.name }}
                </td>
                <td style="border: 1px solid white">
                  {{ item.num }}
                </td>
                <td style="border: 1px solid white">
                  {{
                    parseFloat(
                      ((item.num / demographicData.person) * 100).toFixed(2)
                    ) + "%"
                  }}
                </td>
              </tr>

              <tr v-if="demographicData.familyStructList.length">
                <td style="border: 1px solid white">
                  <h3>家庭结构</h3>
                </td>
                <td style="border: 1px solid white"></td>
                <td style="border: 1px solid white"></td>
              </tr>
              <tr
                v-for="(item, count) in demographicData.familyStructList"
                :key="count + Math.random()"
              >
                <td style="border: 1px solid white">
                  {{ item.name }}
                </td>
                <td style="border: 1px solid white">
                  {{ item.num }}
                </td>
                <td style="border: 1px solid white">
                  {{
                    parseFloat(
                      ((item.num / demographicData.person) * 100).toFixed(2)
                    ) + "%"
                  }}
                </td>
              </tr>

              <tr v-if="demographicData.monthAmountList.length">
                <td style="border: 1px solid white">
                  <h3>人均月收入</h3>
                </td>
                <td style="border: 1px solid white"></td>
                <td style="border: 1px solid white"></td>
              </tr>
              <tr
                v-for="(item, count) in demographicData.monthAmountList"
                :key="count + Math.random()"
              >
                <td style="border: 1px solid white">
                  {{ item.name }}
                </td>
                <td style="border: 1px solid white">
                  {{ item.num }}
                </td>
                <td style="border: 1px solid white">
                  {{
                    parseFloat(
                      ((item.num / demographicData.person) * 100).toFixed(2)
                    ) + "%"
                  }}
                </td>
              </tr>

              <tr v-if="demographicData.stayList.length">
                <td style="border: 1px solid white">
                  <h3>留守儿童</h3>
                </td>
                <td style="border: 1px solid white"></td>
                <td style="border: 1px solid white"></td>
              </tr>
              <tr
                v-for="(item, count) in demographicData.stayList"
                :key="count + Math.random()"
              >
                <td style="border: 1px solid white">
                  {{ item.name }}
                </td>
                <td style="border: 1px solid white">
                  {{ item.num }}
                </td>
                <td style="border: 1px solid white">
                  {{
                    parseFloat(
                      ((item.num / demographicData.person) * 100).toFixed(2)
                    ) + "%"
                  }}
                </td>
              </tr>

              <tr v-if="demographicData.familyList.length">
                <td style="border: 1px solid white">
                  <h3>大部分时间共同居住的家人</h3>
                </td>
                <td style="border: 1px solid white"></td>
                <td style="border: 1px solid white"></td>
              </tr>
              <tr
                v-for="(item, count) in demographicData.familyList"
                :key="count + Math.random()"
              >
                <td style="border: 1px solid white">
                  {{ item.name }}
                </td>
                <td style="border: 1px solid white">
                  {{ item.num }}
                </td>
                <td style="border: 1px solid white">
                  {{
                    parseFloat(
                      ((item.num / demographicData.person) * 100).toFixed(2)
                    ) + "%"
                  }}
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>

      <br />
      <div
        style="
          background: burlywood;
          margin-top: 10px;
          margin-bottom: 10px;
          font-size: 20px;
          padding: 14px;
          color: white;
          text-align: center;
        "
      >
        心理健康
      </div>

      <br />
      <div>
        <h3>{{ demographicData.totalScoreMap[key].title }}</h3>
        <h3>测试目标：</h3>
        <div class="explain">
          本测验的目的是从感觉、情感、思维、意识、行为直到生活习惯、人际关系、饮食睡眠等多种角度，评定一个人是否有某种心理症状及其严重程度如何。它对有心理症状（即有可能处于心理障碍或心理障碍边缘）的人有良好的区分能力。适用于测查某人群中那些人可能有心理障碍，某人可能有何种心理障碍及其严重程度如何。不适合于躁狂症和精神分裂症。本测验不仅可以自我测查，也可以对他人（如其行为异常，有患精神或心理疾病的可能）进行核查，假如发现得分较高，则应进一步筛查。
        </div>
        <h3>量表适用：</h3>
        <div class="explain">本测验适用对象为16岁以上的人群。</div>
        <h3>测验说明：</h3>
        <div class="explain">{{ demographicData.remark }}</div>
        <h3>整体情况：</h3>
        <div>
          本次参与测评共计{{ demographicData.person }}人，综合评估情况如下表：
          <!-- 为：正常{{
            seriesData[0].value
          }}人，占比{{
            parseFloat(((seriesData[0].value / count) * 100).toFixed(2))
          }}%；需要关注{{ seriesData[4].value }}人，占比{{
            parseFloat(((seriesData[4].value / count) * 100).toFixed(2))
          }}%；重点预警{{ seriesData[5].value }}人；占比{{
            parseFloat(((seriesData[5].value / count) * 100).toFixed(2))
          }}%；一级预警：{{ seriesData[1].value }}人，占比{{
            parseFloat(((seriesData[1].value / count) * 100).toFixed(2))
          }}%；二级预警：{{ seriesData[2].value }}人，占比{{
            parseFloat(((seriesData[2].value / count) * 100).toFixed(2))
          }}%；三级预警：{{ seriesData[3].value }}人，占比{{
            parseFloat(((seriesData[3].value / count) * 100).toFixed(2))
          }}%；具体结果如下图所示： -->
          <div style="margin: 10px 0">
            <table border="1" class="table_style">
              <tbody>
                <tr>
                  <td>正常</td>
                  <td>
                    {{ seriesData[0].value }}人，占比{{
                      parseFloat(
                        ((seriesData[0].value / count) * 100).toFixed(2)
                      )
                    }}%
                  </td>
                  <td>需要关注</td>
                  <td>
                    {{ seriesData[5].value }}人，占比{{
                      parseFloat(
                        ((seriesData[5].value / count) * 100).toFixed(2)
                      )
                    }}%
                  </td>
                </tr>
                <tr>
                  <td>重点预警</td>
                  <td>
                    {{ seriesData[4].value }}人；占比{{
                      parseFloat(
                        ((seriesData[4].value / count) * 100).toFixed(2)
                      )
                    }}%
                  </td>
                  <td>一级预警</td>
                  <td>
                    {{ seriesData[1].value }}人，占比{{
                      parseFloat(
                        ((seriesData[1].value / count) * 100).toFixed(2)
                      )
                    }}%
                  </td>
                </tr>
                <tr>
                  <td>二级预警</td>
                  <td>
                    {{ seriesData[2].value }}人，占比{{
                      parseFloat(
                        ((seriesData[2].value / count) * 100).toFixed(2)
                      )
                    }}%
                  </td>
                  <td>三级预警</td>
                  <td>
                    {{ seriesData[3].value }}人，占比{{
                      parseFloat(
                        ((seriesData[3].value / count) * 100).toFixed(2)
                      )
                    }}%
                  </td>
                </tr>
              </tbody>
            </table>
          </div>

          具体结果如下图所示：
        </div>
        <div class="echarts1" id="heartWarningPie"></div>
        <div
          v-for="(item, index) in factorData.slice(0, 10)"
          :key="item.factorName"
        >
          <h4>{{ item.factorName }}</h4>
          <div class="explain">该因子主要是{{ item.suggest }}</div>
          <div class="explain">{{ item.factorName }}调查结果如下所示:</div>
          <!-- <div class="explain">
            {{ item.factorName }}调查结果如下图所示：正常{{
              item.list[0].value
            }}人，占比{{
              parseFloat(((item.list[0].value / item.num) * 100).toFixed(2))
            }}%；一般症状：{{ item.list[1].value }}人，占比{{
              parseFloat(((item.list[1].value / item.num) * 100).toFixed(2))
            }}%；严重症状：{{ item.list[2].value }}人，占比{{
              parseFloat(((item.list[2].value / item.num) * 100).toFixed(2))
            }}%
          </div> -->
          <div style="margin: 10px 0">
            <table border="1" class="table_style">
              <tbody>
                <tr>
                  <td>测评结果</td>
                  <td>正常</td>
                  <td>一般症状</td>
                  <td>严重症状</td>
                </tr>
                <tr>
                  <td>人数</td>
                  <td>{{ item.list[0].value }}</td>
                  <td>{{ item.list[1].value }}</td>
                  <td>{{ item.list[2] ? item.list[2].value : 0 }}</td>
                </tr>
                <tr>
                  <td>占比</td>
                  <td>
                    {{
                      parseFloat(
                        ((item.list[0].value / item.num) * 100).toFixed(2)
                      )
                    }}%
                  </td>
                  <td>
                    {{
                      parseFloat(
                        ((item.list[1].value / item.num) * 100).toFixed(2)
                      )
                    }}%
                  </td>
                  <td>
                    {{
                      item.list[2]
                        ? parseFloat(
                            ((item.list[2].value / item.num) * 100).toFixed(2)
                          )
                        : 0
                    }}%
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
          <div :id="'factor' + index" class="factor"></div>
        </div>
        <div>
          <h4>{{ factorData[factorData.length - 1].factorName }}</h4>
          <div class="explain">
            {{ factorData[factorData.length - 1].factorName }}调查结果如下所示:
          </div>
          <div style="margin: 10px 0">
            <table border="1" class="table_style">
              <tbody>
                <tr>
                  <td>测评结果</td>
                  <td>正常</td>
                  <td>需要关注</td>
                </tr>
                <tr>
                  <td>人数</td>
                  <td>{{ factorData[factorData.length - 1].list[0].value }}</td>
                  <td>{{ factorData[factorData.length - 1].list[1].value }}</td>
                </tr>
                <tr>
                  <td>占比</td>
                  <td>
                    {{
                      parseFloat(
                        (
                          (factorData[factorData.length - 1].list[0].value /
                            factorData[factorData.length - 1].num) *
                          100
                        ).toFixed(2)
                      )
                    }}%
                  </td>
                  <td>
                    {{
                      parseFloat(
                        (
                          (factorData[factorData.length - 1].list[1].value /
                            factorData[factorData.length - 1].num) *
                          100
                        ).toFixed(2)
                      )
                    }}%
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
          <div :id="'factor' + (factorData.length - 1)" class="factor"></div>
        </div>
        <h3>{{ demographicData.schoolName }}总体心理健康分析：</h3>
        <div class="explain">
          调查显示，目前{{
            demographicData.schoolName
          }}学生心理健康总体状况：有{{
            parseFloat(((seriesData[0].value / count) * 100).toFixed(2))
          }}%的学生正常， 在被调查的学生中有{{
            parseFloat(((seriesData[5].value / count) * 100).toFixed(2))
          }}%的学生需要关注， 而有{{
            parseFloat(((seriesData[4].value / count) * 100).toFixed(2))
          }}%的学生心理健康预警，
          由此可见，处于心理健康水平“需要关注”的学生，当前可能存在一些心理问题或心理困扰，需要学校对他们进行进一步的心理辅导和心理健康教育。此外，对于处于心理“预警”的学生，其心理健康水平可能较低，甚至存在一定的心理疾病或心理障碍，需要立即对其进行面谈，了解其情绪状态，进而及时采取相应的预防措施。
          若Ta们的心理问题得不到及时解决，就可能会产生心理障碍或心理疾病
          ，此部分学生的心理问题不容忽视。
        </div>
        <h3>总结：</h3>
        <div class="explain">
          学生心理健康成长和发展从根本上来说是一种自觉和主动的过程，引导学生主动参与，切实提高心育实效，不断通过加大宣传力度，让学生科学了解发展性心理健康教育，强化其参与心理健康教育，从而优化自身心理素质，提高自身心理健康水平。
          心理健康教育工作是长期的、潜移默化的过程。全校教师都承载着一份责任，一份希望。开展心理课、建设心理室、建立每个学生的心理健康档案、制定个体辅导规划.....我们坚持着将每一次进步看做一个新的起点，站在这新的起点，把足迹延向远方，把心弦拨响，积蓄和迸发新的能量，让学生的心灵天空一片蔚蓝。
        </div>
      </div>
    </div>
    <!-- <div style="text-align: center">
      <el-button type="primary" @click="handleDown">导出分析报告</el-button>
    </div> -->
  </basic-container>
</template>

<script>
import { getTeam } from "@/api/census/report";
import { mapGetters } from "vuex";
import { getList } from "@/api/census/grade";
// // import htmlToPdf from "@/util/htmlToPdf";
// import htmlToPdf from "@/util/htmlToPdf";
import htmlToPdf from "@/util/htmlToPdf";
import * as echarts from "echarts";
import axios from "@/router/axios";
import { cloneDeep } from "lodash";
import { getList as getLevelList, getEducationInfo } from "@/api/system/dict";
import { getTenantInfo } from "@/api/system/tenant";
export default {
  data() {
    return {
      form: {},
      activeNames: ["1"],
      totalScoreMapName: [],
      demographicData: [],
      conclusion: "",
      gradeServiceList: [],
      factorData: [],
      key: "",
      levelType: [
        { name: "正常", value: 0 },
        { name: "一般症状", value: 0 },
        { name: "严重症状", value: 0 },
      ],
      loading: false,
      seriesData: [],
      count: 0,
      sampleTotal: 0,
      educationInfo: {},
      tenantInfo: {},
    };
  },
  computed: {
    ...mapGetters(["userInfo", "permission"]),
    permissionList() {
      return {
        addBtn: false,
        viewBtn: false,
        delBtn: true,
        editBtn: false,
      };
    },
  },
  created() {
    // this.$loading({
    //   lock: true,
    //   text: "Loading",
    //   spinner: "el-icon-loading",
    //   background: "rgba(0, 0, 0, 0.7)",
    // });
    getList({}).then((res) => {
      this.gradeServiceList = res.data.data;
      this.getReportList();
    });
    this.sampleTotal = this.$route.query.sampleTotal;
    this.getSupervision();
  },
  methods: {
    getSupervision() {
      let info = JSON.parse(localStorage.getItem("saber-userInfo")).content;

      getEducationInfo(info.tenantId).then((res) => {
        this.educationInfo = res.data.data;
        this.educationInfo.principal = info.userName;
      });

      getTenantInfo(info.tenantId).then((res) => {
        this.tenantInfo = res.data.data;
      });
    },
    getGradeName(id) {
      for (let zz in this.gradeServiceList) {
        if (this.gradeServiceList[zz].gradeNo == id) {
          return this.gradeServiceList[zz].gradeName;
        }
      }
      return "";
    },
    getReportList() {
      getTeam(
        Object.assign({
          id: this.$route.query.id,
        })
      ).then(async (res) => {
        this.demographicData = res.data.data;
        // console.log(res.data.data);
        this.conclusion = this.demographicData.conclusion;
        for (var item in this.demographicData.totalScoreMap) {
          let rowData = this.demographicData.totalScoreMap[item];
          let sexTotalObj = {};
          rowData.sexTotal.map((vv) => {
            if (sexTotalObj[vv.factorName]) {
              sexTotalObj[vv.factorName].push(vv);
            } else {
              sexTotalObj[vv.factorName] = [vv];
            }
          });
          rowData.sexTotalObj = sexTotalObj;

          let gradeTotalObj = {};
          rowData.gradeTotal.sort(this.compare("other"));
          rowData.gradeTotal.map((vv) => {
            if (gradeTotalObj[vv.factorName]) {
              gradeTotalObj[vv.factorName].push(vv);
            } else {
              gradeTotalObj[vv.factorName] = [vv];
            }
          });
          rowData.gradeTotalObj = gradeTotalObj;
        }

        let key = Object.keys(res.data.data.totalScoreMap);
        this.key = key;
        let factorData = [];
        await axios
          .get(`/api/blade-measure/measure/gaugefactor/list`, {
            params: {
              current: 1,
              size: 20,
              gaugeId: key[0],
            },
          })
          .then((res) => {
            let data = res.data.data.records;
            data.forEach((item) => {
              if (
                item.factorName.indexOf("总分") == -1 &&
                item.factorName.indexOf("总均分") == -1
              ) {
                let factor = {
                  factorName: item.factorName,
                  suggest: item.suggest,
                  list: [],
                  num: 0,
                };
                this.demographicData.totalScoreMap[key].total.forEach(
                  (item2) => {
                    if (item.factorName == item2.factorName) {
                      let child = {};
                      if (item.factorName == "阳性项目数") {
                        child = {
                          name:
                            item2.name.indexOf("正常") > -1
                              ? "正常"
                              : "需要关注",
                          value: item2.num,
                        };
                        factor.num += item2.num;
                      } else {
                        child = {
                          name:
                            item2.name.indexOf("正常") > -1
                              ? "正常"
                              : item2.name.indexOf("一般症状") > -1
                              ? "一般症状"
                              : "严重症状",
                          value: item2.num,
                        };
                        factor.num += item2.num;
                      }
                      // debugger;

                      factor.list.push(child);
                    }
                  }
                );
                factorData.push(factor);
              }
            });

            this.factorData = cloneDeep(factorData);
            this.factorData.map((item) => {
              let levelType = {};
              if (item.factorName == "阳性项目数") {
                levelType = [
                  { name: "正常", value: 0 },
                  { name: "需要关注", value: 0 },
                ];
              } else {
                levelType = [
                  { name: "正常", value: 0 },
                  { name: "一般症状", value: 0 },
                  { name: "严重症状", value: 0 },
                ];
              }

              let data = levelType.map((item2) => {
                item.list.map((item3) => {
                  if (item2.name == item3.name) {
                    item2.value = item3.value;
                  }
                });
                return item2;
              });
              item.list = data;
              return item;
            });
            // console.log(this.factorData);
            this.$nextTick(() => {
              // this.initChartData();
              this.initWarning(this.factorData);
            });
          });
      });
    },
    initChartData() {
      for (var item in this.demographicData.totalScoreMap) {
        this.totalScoreMapName.push(item);
        let seriesData = [];
        let rowData = this.demographicData.totalScoreMap[item];
        for (var data in rowData.total) {
          let newItem = rowData.total[data];
          seriesData.push({ name: newItem.name, value: newItem.num });
        }
        this.initPieChartData(item, seriesData);
        for (let zz in rowData.sexTotalObj) {
          this.initLineChartData(
            zz.replace("(", "").replace(")", "") + "sexTotal",
            zz,
            rowData.sexTotalObj[zz]
          );
        }
        for (let zz in rowData.gradeTotalObj) {
          this.initGradeeChartData(
            zz.replace("(", "").replace(")", "") + "gradeTotal",
            zz,
            rowData.gradeTotalObj[zz]
          );
        }
      }
    },
    initPieChartData(item, seriesData) {
      var myChart = echarts.init(document.getElementById(item + "pie"));
      // 3. 使用刚指定的配置项和数据，显示图表
      myChart.setOption({
        tooltip: {
          show: false,
        },
        legend: {
          show: false,
        },
        series: [
          {
            animation: false,
            name: "鸿康心理",
            type: "pie",
            radius: ["40%", "60%"],
            hoverAnimation: false,
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: "#fff",
              borderWidth: 2,
            },
            label: {
              show: true,
              formatter: "{b}: {d}%",
            },
            labelLine: {
              show: true,
            },
            data: seriesData,
          },
        ],
      });
    },
    initLineChartData(id, title, data) {
      let xAxisData = [];
      let legend = [];
      let seriesData = [];
      let typeMap = {};
      for (let item in data) {
        let row = data[item];
        if (xAxisData.indexOf(row.name) == -1) {
          xAxisData.push(row.name);
        }
        legend.push(row.other);
        let val = parseFloat(
          ((row.num / this.demographicData.person) * 100).toFixed(2)
        );
        row.value = val;
        if (row.other && (row.other == 1 || row.other == 2)) {
          if (typeMap[row.name]) {
            typeMap[row.name].push(row);
          } else {
            typeMap[row.name] = [row];
          }
        }
      }

      let seriesList = {};
      seriesList["男生"] = [];
      seriesList["女生"] = [];
      for (let key in typeMap) {
        let rowData = typeMap[key];
        for (let obj in rowData) {
          let row = rowData[obj];

          if (row.other.indexOf("男") != -1 || row.other == "1") {
            seriesList["男生"].push(row.value);
            if (rowData.length < 2) {
              seriesList["女生"].push(0);
            }
          } else if (row.other.indexOf("女") != -1 || row.other == "2") {
            seriesList["女生"].push(row.value);
            if (rowData.length < 2) {
              seriesList["男生"].push(0);
            }
          }
        }
      }
      for (let itemName in seriesList) {
        seriesData.push({
          name: itemName,
          type: "bar",
          barWidth: 30,
          start: 1, //初始化时，滑动条宽度开始标度
          end: 50,
          emphasis: {
            focus: "series",
          },
          label: {
            normal: {
              rotate: 50, // 旋转70度
              distance: 10, // 距离图形元素的距离
              offset: [5, 1],
              show: true,
              position: "top",
              formatter: "{c}%",
            },
          },
          itemStyle: {
            normal: {
              label: {
                show: true, //开启显示
                position: "top", //在上方显示
                textStyle: {
                  //数值样式
                  color: "black",
                },
              },
            },
          },
          data: seriesList[itemName],
        });
      }
      var myChart = echarts.init(document.getElementById(id));
      // 3. 使用刚指定的配置项和数据，显示图表
      myChart.setOption({
        title: {
          text: title,
        },
        animation: false,
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
          formatter: "{a}: {c}%",
        },
        legend: {
          data: ["男生", "女生"],
        },
        toolbox: {
          show: false,
        },
        xAxis: [
          {
            type: "category",
            axisTick: { show: false },
            start: 1, //初始化时，滑动条宽度开始标度
            end: 500,
            data: xAxisData,
            axisLabel: {
              interval: 0,
              rotate: 30,
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            data: [10, 20, 30, 40, 50, 60, 70, 80, 90, 100],
          },
        ],
        series: seriesData,
      });
    },
    initGradeeChartData(id, title, data) {
      let xAxisData = [];
      let legend = [];
      let seriesData = [];
      let typeMap = {};
      let allNames = [];
      for (let item in data) {
        let row = data[item];

        for (let g in this.gradeServiceList) {
          if (
            this.gradeServiceList[g].gradeNo == row.other &&
            xAxisData.indexOf(this.gradeServiceList[g].gradeName) == -1
          ) {
            xAxisData.push(this.gradeServiceList[g].gradeName);
          }
        }
        let val = parseFloat(
          ((row.num / this.demographicData.person) * 100).toFixed(2)
        );
        row.value = val;
        if (row.other) {
          if (typeMap[row.other]) {
            typeMap[row.other].push(row);
          } else {
            typeMap[row.other] = [row];
          }
        }
        if (allNames.indexOf(row.name) == -1) {
          allNames.push(row.name);
          legend.push(row.name);
        }
      }
      let seriesList = {};
      for (let index in allNames) {
        let name = allNames[index];
        for (let key in typeMap) {
          let gradeList = typeMap[key];
          let isExit = false;
          let chartVal = 0;
          for (let zz in gradeList) {
            let rowData = gradeList[zz];
            if (rowData.name == name) {
              isExit = true;
              chartVal = rowData.value;
              break;
            }
          }
          if (!isExit) {
            gradeList.push({ other: key, name: name, num: 0, value: 0 });
          }
          if (seriesList[name]) {
            seriesList[name].push(chartVal);
          } else {
            seriesList[name] = [chartVal];
          }
        }
      }
      for (let itemName in seriesList) {
        seriesData.push({
          name: itemName,
          type: "bar",
          barWidth: 30,
          start: 1, //初始化时，滑动条宽度开始标度
          end: 50,
          emphasis: {
            focus: "series",
          },
          label: {
            normal: {
              rotate: 50, // 旋转70度
              distance: 10, // 距离图形元素的距离
              offset: [5, 1],
              show: true,
              position: "top",
              formatter: "{c}%",
            },
          },
          itemStyle: {
            normal: {
              label: {
                show: true, //开启显示
                position: "top", //在上方显示
                textStyle: {
                  //数值样式
                  color: "black",
                },
              },
            },
          },
          data: seriesList[itemName],
        });
      }
      var myChart = echarts.init(document.getElementById(id));
      // 3. 使用刚指定的配置项和数据，显示图表
      myChart.setOption({
        title: {
          text: title,
        },
        animation: false,
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
          formatter: "{a}: {c}%",
        },
        legend: {
          data: legend,
        },
        toolbox: {
          show: false,
        },
        xAxis: [
          {
            type: "category",
            axisTick: { show: false },
            start: 1, //初始化时，滑动条宽度开始标度
            end: 500,
            data: xAxisData,
            axisLabel: {
              interval: 0,
              rotate: 30,
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            data: [10, 20, 30, 40, 50, 60, 70, 80, 90, 100],
          },
        ],
        series: seriesData,
      });
    },
    handleDown() {
      // htmlToPdf.downloadPDF(
      //   document.querySelector("#groupAnalysisExport"),
      //   "团体分析报告"
      // );
      this.$router.push({
        path: "/groupReport/groupAnalysisPdf2",
        query: { id: this.$route.query.id, sampleTotal: this.sampleTotal },
      });
    },
    handleDown2() {
      this.$router.push({
        path: "/groupReport/schoolTemplateSCL",
        query: { id: this.$route.query.id, sampleTotal: this.sampleTotal },
      });
    },
    compare(property) {
      return function (a, b) {
        var value1 = a[property] * 1;
        var value2 = b[property] * 1;
        return value1 - value2;
      };
    },
    async initWarning(factorData) {
      this.getCount(this.demographicData.projectId, factorData);
    },
    initWholeEcharts(seriesData) {
      var chartDom = document.getElementById("heartWarningPie");
      var myChart = echarts.init(chartDom);
      var option;
      option = {
        legendHoverLink: false,
        grid: {
          height: 180,
        },
        title: {
          text: "整体测评概况",
          textStyle: {
            color: "#0986b3",
            fontSize: 12,
          },
          x: "center",
          y: "bottom",
        },
        tooltip: {
          trigger: "item",
          formatter: "{b}: {c}人(占比：{d}%)",
        },
        legend: {
          orient: "horizontal",
          top: "85%",
          textStyle: {
            // color: "white",
          },
        },
        color: ["green", "#FF4500", "#FFA07A", "#FFD700", "#8552a1", "#224b8f"],
        series: [
          {
            name: "心理安全预警",
            type: "pie",
            radius: ["40%", "60%"],
            center: ["50%", "45%"],
            data: seriesData,
            labelLine: {
              length: 7,
              length2: 5,
              show: true,
            },
            label: {
              // position: "inside",
              // color: "white",
              formatter: "{d}%",
            },
          },
        ],
      };

      option && myChart.setOption(option);
    },
    initFactorEachrts(seriesData, index) {
      var chartDom = document.getElementById("factor" + index);
      var title = seriesData.factorName + "测评情况";
      var myChart = echarts.init(chartDom);
      var option;
      option = {
        legendHoverLink: false,
        grid: {
          height: 160,
        },
        title: {
          text: title,
          textStyle: {
            color: "#0986b3",
            fontSize: 12,
          },
          x: "center",
          y: "bottom",
        },
        tooltip: {
          trigger: "item",
          formatter: "{b}: {c}人(占比：{d}%)",
        },
        legend: {
          orient: "horizontal",
          top: "82%",
        },
        color: ["green", "#FFA07A", "#FF4500", "#FFD700", "#224b8f", "#8552a1"],
        series: [
          {
            name: "心理安全预警",
            type: "pie",
            radius: ["40%", "60%"],
            center: ["50%", "45%"],
            data: seriesData.list,
            label: {
              formatter: "{c} 人",
            },
          },
        ],
      };

      option && myChart.setOption(option);
    },
    async getCount(projectId, factorData) {
      let seriesData = [];
      await getLevelList(1, 1000, { code: "warning_level" }).then((res) => {
        res.data.data[0].children.map((vv) => {
          if (vv.dictKey != 0) {
            seriesData.push(vv);
          }
        });
        seriesData.unshift({
          dictKey: 0,
          dictValue: "正常人数",
        });
        seriesData = seriesData.map((item) => {
          let level = {
            code: item.dictKey,
            name: item.dictValue,
            value: 0,
          };
          return level;
        });
        axios
          .get("/api/blade-measure/measure/userprojectgauge/count", {
            params: {
              projectId,
            },
          })
          .then((res) => {
            let data = res.data.data;
            let num = 0;
            seriesData.map((item) => {
              data.map((item2) => {
                if (item.code == item2.level) {
                  item.value = item2.count;
                }
              });
              return item;
            });
            seriesData.forEach((item) => {
              num += item.value;
            });
            this.seriesData = seriesData;
            this.count = num;
            this.loading = true;

            this.$nextTick(() => {
              this.initWholeEcharts(seriesData);
              factorData.forEach((item, index) => {
                this.initFactorEachrts(item, index);
              });
            });

            // console.log(res.data);
            // console.log(seriesData);
          });
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.groupAnalysis {
  #groupAnalysisExport {
    background-color: #fff;
    /* width: 1000px; */
    /* height: 400px; */
    margin: auto;
    padding: 40px;
    box-sizing: border-box;
  }
  .textCenter {
    text-align: center;
  }
  .margin40 {
    margin: 40px;
  }
  .table_style td,
  th {
    padding: 10px;
    font-size: 15px;
    max-width: 300px;
  }
  .textCenter {
    text-align: center;
  }
  .table_style {
    border-collapse: collapse;
    width: 100%;
    text-align: center;
  }
  .collapseTitle {
    font-size: 15px;
    font-weight: 900;
  }
}

.explain {
  text-indent: 32px;
}

.echarts1 {
  // width: 350px;
  height: 350px;
  margin: 0 auto;
}

.factor {
  // width: 300px;
  height: 350px;
  margin: 0 auto;
}

.preface {
  margin: 10px 0;
  text-indent: 32px;
}
</style>
